<template>
  <swiper
    :indicator-dots="indicatorDots"
    :autoplay="autoplay"
    :interval="interval"
    :duration="duration"
    circular
    previous-margin="10px"
    next-margin="10px"
  >
    <block
      v-for="(item,index) in background"
      :key="index"
    >
      <swiper-item>
        <view class="swiper-item">
          <div :class="item">
            {{item}}
          </div>
        </view>
      </swiper-item>
    </block>
  </swiper>
</template>

<script>
export default {
  props: {
    // 是否显示面板指示点
    indicatorDots: {
      type: Boolean,
      default: false
    },
    // 指示点颜色
    indicatorColor: {
      type: String,
      default: 'rgba(0, 0, 0, .3)'
    },
    // 当前选中的指示点颜色
    indicatorActiveColor: {
      type: String,
      default: '#000000'
    },
    // 是否自动切换
    autoplay: {
      type: Boolean,
      default: false
    },
    // 自动切换时间间隔
    interval: {
      type: Number,
      default: 5000
    },
    // 滑动动画时长
    duration: {
      type: Number,
      default: 500
    },
    // 滑动方向是否为纵向
    vertical: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
      indicatorDots: true,
      vertical: false,
      autoplay: false
    }
  },
  onLoad () {
  },
  watch: {
  },
  computed: {

  },
  beforeMount () {

  },
  mounted () {

  },
  methods: {

  }
}
</script>

<style lang="less" scoped>
.full-wrapper {
  padding-top: 20px;
}

.swiper-item {
  height: 100%;
  padding: 5px;
  div {
    height: 100%;
  }
}
.demo-text-1 {
  background-color: rgb(142, 226, 14);
}
.demo-text-2 {
  background-color: tomato;
}
.demo-text-3 {
  background-color: rgb(248, 186, 29);
}
</style>
